<template>
    <div>
        <svg width="163" height="130" id="container" class="boxBodyitem">
            <path id="hjtboxCover" fill="rgba(198, 22, 57, 0.8)" d="M 3 22 A 78 21 0 0 1 160 22 A 78 21 0 0 1 3 22 Z"/>
            <path id="hjtboxBody" fill="rgba(172, 22, 57, 0.5)" d="M 65 128 L 3 22 A 78 18 0 0 0 160 22 L 97 128 Z"/>
        </svg>
        <!-- <div class="boxBodyitem"></div> -->
        <div class="hjt"></div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted } from 'vue';

let boxBodypolygon: HTMLElement;
let boxCoverpolygon: HTMLElement;

const boxBodySrt = 'M 65 128 L 65 128 A 78 18 0 0 0 97 128 L 97 128 Z';
let boxBodyPercentArr = boxBodySrt.split(' ');
let boxBodyNumber: string = '';


const boxCoverSrt = 'M 65 128 A 78 21 0 0 1 97 128 A 78 21 0 0 1 65 128 Z';
let boxCoverPercentArr = boxCoverSrt.split(' ');
let boxCoverNumber: string = '';

const animatPoints = () => {
    let lineXStep = (65 - 3) / 100;
    let lineYStep = (128 - 22) / 100;

    boxBodyPercentArr = boxBodyPercentArr.map((item: string, index: number) => {
        if ([4, 5  , 12, 13].includes(index)) {
            if ([4, 12].includes(index)) {
                if (index === 4) {
                    return (Number(item) - lineXStep).toString();
                }else{
                    return (Number(item) + lineXStep).toString();
                }
            }
            return (Number(item) - lineYStep).toString();
        } else {
            return item
        }
    })
    boxBodyNumber = boxBodyPercentArr.join(' ');


    boxCoverPercentArr = boxCoverPercentArr.map((item: string, index: number) => {
        if ([1, 2  , 9, 10,   17, 18].includes(index)) {
            if ([1, 9, 17].includes(index)) {
                if ([1, 17].includes(index)) {
                    return (Number(item) - lineXStep).toString();
                }else{
                    return (Number(item) + lineXStep).toString();
                }
            }
            return (Number(item) - lineYStep).toString();
        } else {
            return item
        }
    })
    boxCoverNumber = boxCoverPercentArr.join(' ');

    // boxNumber = boxCoverNumber + ' ' + boxBodyNumber;
}
const setPoints = () => {
    animatPoints();
    boxBodypolygon?.setAttribute('d', boxBodyNumber);
    boxCoverpolygon?.setAttribute('d', boxCoverNumber);
}

const totalTime = 10000;

var timerId: any
onMounted(() => {
    boxBodypolygon = document.getElementById('hjtboxBody') as HTMLElement;
    boxCoverpolygon = document.getElementById('hjtboxCover') as HTMLElement;
    setPoints();
    let timeItem = 0
    timerId = setInterval(function () {
        timeItem += 100;
        if (timeItem >= totalTime) {
            clearInterval(timerId)
        }
        setPoints();
    }, 10);
})
</script>

<style lang="scss" scoped>
.boxBodyitem {
    width: 163px;
    height: 130px;
    position: absolute;
    bottom: 0;
    // background: rgba(0, 0, 0, 0.8);
    // clip-path: path('M 3 22 A 78 21 0 0 1 160 22 A 78 21 0 0 1 3 22 Z');
}

.hjt {
    width: 163px;
    height: 167px;
    background-size: cover;
    background-image: url('/src/assets/gufeng/hjt.png');
}
</style>